<template>
    <div id="base-info">
        <p class="title">{{message.title}}</p>
        <div id="info">
            <span class="newPrice">{{message.newPrice}}</span>
            <del class="oldPrice">{{message.oldPrice}}</del>
            <sup class="desc">{{message.discountDesc}}</sup>
        </div>
        <div class="good-info">
            <div v-for="(item,index) in message.columns" :key="index" >
                <div class="item_info">{{item}}</div>
            </div>
        </div>
        <div class="serve">
            <div v-for="(item,index) in message.services" :key="index" class="serve_item">
               <div>
                   <img :src="item.icon" alt="" width="10px" height="10px">
                   <span class="serve_item_name">{{item.name}}</span>
               </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BaseInfo",
        props:{
            message:{}
        }
    }
</script>

<style scoped>
    #base-info{
        padding-bottom: 15px;
        border-bottom: 4px gainsboro solid;
    }
    .title{
        margin-top: 10px;
        margin-left: 10px;
    }
    #info{
        margin-left: 10px;
        margin-top: 15px;
    }
    .newPrice{
        font-size: 22px;
        color: lightcoral;
    }
    .oldPrice{
        margin-left: 5px;
        font-size: 14px;
        color: darkgray;
    }
    .desc{
        background-color: deeppink;
        color: white;
        font-size: 13px;
        margin-bottom: 15px;
        border-radius: 4px;
        margin-left: 5px;
    }
    .good-info{
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        border-bottom: 1px silver solid;
        padding-bottom: 15px;
    }
    .item_info{
        flex: 1;
        color: darkgray;
        font-size: 13px;
    }
    .serve{
        padding-top: 15px;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        margin-left: 10px;
        position: relative;
    }
    .serve_item{
        flex: 1;
    }
    .serve_item_name{
        font-size: 7px;
        position: absolute;
        top: 18px;
    }
</style>